<script setup>
import {ref} from 'vue'

//声明一个变量标识用户是否登录过
const isLogin = ref(false)
//存储用户名
const username = ref('jack')
//分数
const score = ref(86.5)
//标识是否显示
const flag = ref(true)
</script>

<template>
    <div v-if="isLogin">欢迎您：{{username}}</div>
    <div v-else>欢迎您:游客，请登录!</div>
    <div>你的成绩等级：</div>
    <p v-if="score>=86">优秀</p>
    <p v-else-if="score>=70">良好</p>
    <p v-else-if="score>=60">合格</p>
    <p v-else>不及格</p>
    <div v-if="!flag" class="style1" ></div>
    <div v-show="!flag" class="style1" ></div>
</template>

<style scoped>
  .style1{
    width: 120px;
    height: 120px;
    background-color: red;
  }
</style>